<template>
	<view class="content-box flex flex-col items-center">
		<view class="top-box">
			<img class="top-img" src="https://hlximage.xiangle6.cn/home/images/public1.png" alt="">
		</view>
		<scroll-view scroll-y class="notice-box">
			<view class="notice-item flex" v-for="(i, ii) in dataList" :key="ii">
				<img :src="i.imgUrl" alt="" @click="enterDetail(i)">
				<view class="text-box flex flex-col">
					<view class="title" @click="enterDetail(i)">
						{{ i.title || '' }}
						<!-- <text>{{ i.title }}</text> -->
					</view>
					<text class="auther">{{ i.subTitle || '' }}</text>
					<text class="time">{{ i.createTime || '' }}</text>
				</view>
			</view>
		</scroll-view>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loding.vue'
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				dataList: []
			};
		},
		components:{
			Loading
		},
		methods: {
			enterDetail(item) {
				uni.navigateTo({
					url: `/pages/articleDetail/articleDetail?id=${item.id}&title=${item.title}`
				})
			},
		},
		onLoad() {
			this.$refs.loading.progress = 100
			// setTimeout(() => {
				
			// },1000)
			request('/api/hlx-article/list', { articleTypeId: 2 }, 'get').then(res => {
				this.$refs.loading.destoryed()
				if (res.data.code === 200) {
					this.dataList = res.data.rows.map(i => {
						// i.createTime = '2021-09-09 23:12:12'
						return i
					})
				}
			})
		}
	}
</script>

<style>
.content-box {
	border-top: 1px solid #ccc;
	height: 100vh;
	box-sizing: border-box;
}
.top-box {
	margin-top: 18rpx;
	margin-bottom: 40rpx;
}
.top-box .top-img {
	width: 712rpx;
	height: 268rpx;
}
.notice-box {
	width: 712rpx;
	height: calc(100% - 360rpx);
}
.notice-item {
	margin-bottom: 40rpx;
	height: 160rpx;
}
.notice-item img {
	width: 238rpx;
	height: 160rpx;
	border-radius: 16rpx;
}
.notice-item .text-box {
	margin-left: 28rpx;
}
.notice-item .title {
	width: 416rpx;
	height: 66rpx;
	font-size: 32rpx;
	font-weight: 500;
	font-family: Source Han Sans CN, Source Han Sans CN;
	color: #333333;
	line-height: 35rpx;
	margin-top: 14rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	max-height: 66rpx;
}
.notice-item .title text {
	display: inline-block;
	  white-space: normal;
	  word-wrap: break-word;
}
.notice-item .auther {
	width: 416rpx;
	height: 32rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	color: #999999;
	line-height: 32rpx;
	margin-top: 6rpx;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.notice-item .time {
	width: 416rpx;
	height: 32rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	color: #999999;
	line-height: 32rpx;
	margin-top: 6rpx;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
</style>
